<template>
    <div>
        <header id="header">
            <nav class="nav">
                <h1 class="h1">      
                    <a class="nav-a backs">
                        <div class="iconfont icon-category maizuo-left"></div>
                        <div class="maizuo">{{title}}</div>
                    </a>
                </h1>
                <div class="right">
                    <a class="city">
                        <span>深圳</span>
                        <i class="iconfont icon-down"></i>
                    </a>
                    <a class="user">
                        <i class="iconfont icon-zhanghu"></i>
                    </a>
                </div>
            </nav>
            
        </header>
        <navLeft></navLeft>
    </div>
</template>
<script>
import $ from 'jquery';
import navLeft from './navLeft.vue';
    export default {
        components:{
            navLeft
        },
        props:['title'],
        mounted:function(){
            $(function(){       
                    $('.backs').on('click',function(){
                        $(".nav-box").click(function(event){
                            event.stopPropagation();
                        });
                         var qqq = parseInt($(".nav-box").css('left'));
                        if(qqq<0){
                             
                                $('#zhe').fadeIn();        
                                $(".nav-box").animate({left:'0'});
                        } else {
                             $('.nav-box').animate({left:'-210px'});
                            $('#zhe').fadeOut();  
                        }
                    })
            })
            
        }
    }
</script>